<%@ page language="java" errorPage="/error.jsp" pageEncoding="UTF-8"
         contentType="text/html;charset=utf-8" %>
<%@ include file="/common/taglibs.jsp" %>
<head>
    <title>商品分类</title>
    <%@ include file="/common/scripts.jsp" %>
    <%@ include file="/common/ztree.jsp" %>



    <s:action name="product-category!getAllCategory" var="categoryList" executeResult="false" namespace=""/>

    <SCRIPT type="text/javascript">
        var setting = {
            view: {
                selectedMulti: false,
                dblClickExpand: false
            },
            edit: {
                enable: true,
                editNameSelectAll: true,
                showRemoveBtn: false,
                showRenameBtn: true
            },
            data: {
                simpleData: {
                    enable: true
                }
            },
            callback: {
                onRightClick: OnRightClick,
                beforeDrag: beforeDrag,
                beforeEditName: beforeEditName,
                beforeRemove: beforeRemove,
                beforeRename: beforeRename,
                onRemove: onRemove,
                onRename: onRename
            }
        };

        var zNodes =${categoryList.jsonStr};


        function OnRightClick(event, treeId, treeNode) {
            if (!treeNode && event.target.tagName.toLowerCase() != "button" && $(event.target).parents("a").length == 0) {
                zTree.cancelSelectedNode();
                showRMenu("root", event.clientX, event.clientY);
            } else if (treeNode && !treeNode.noR) {
                zTree.selectNode(treeNode);
                showRMenu("node", event.clientX, event.clientY);
            }
        }

        function showRMenu(type, x, y) {
            $("#rMenu ul").show();
            if (type == "root") {
                $("#m_del").hide();
                $("#m_check").hide();
                $("#m_unCheck").hide();
            } else {
                $("#m_del").show();
                $("#m_check").show();
                $("#m_unCheck").show();
            }
            rMenu.css({"top": y + "px", "left": x + "px", "visibility": "visible"});

            $("body").bind("mousedown", onBodyMouseDown);
        }
        function hideRMenu() {
            if (rMenu) rMenu.css({"visibility": "hidden"});
            $("body").unbind("mousedown", onBodyMouseDown);
        }
        function onBodyMouseDown(event) {
            if (!(event.target.id == "rMenu" || $(event.target).parents("#rMenu").length > 0)) {
                rMenu.css({"visibility": "hidden"});
            }
        }
        function addTreeNode() {
            hideRMenu();
            var newNode = {name: "新建节点"};
            if (zTree.getSelectedNodes()[0]) {
                var parentNode = zTree.getSelectedNodes()[0];
                $.ajax({
                    url: "${ctx}/product-category!addChild.action",
                    type: "post",
                    async: false,  //同步
                    data: {
                        id: parentNode.id,
                        "productCategory.name": "新建节点"
                    },
                    dataType: "json",
                    success: function (result) {
                        layer.msg(result.msg);
                        newNode.checked = parentNode.checked;
                        zTree.addNodes(parentNode, newNode);
                        window.location.reload();
                    }
                });

            } else {
                $.ajax({
                    url: "${ctx}/product-category!addChild.action",
                    type: "post",
                    async: false,  //同步
                    data: {
                        "productCategory.name": "新建节点"
                    },
                    dataType: "json",
                    success: function (result) {
                        layer.msg(result.msg);
                        newNode.checked = parentNode.checked;
                        zTree.addNodes(parentNode, newNode);
                        window.location.reload();
                    }
                });
                zTree.addNodes(null, newNode);
                window.location.reload();
            }


        }
        function removeTreeNode() {
            hideRMenu();
            var nodes = zTree.getSelectedNodes();
            if (nodes && nodes.length > 0) {

                var myNode = nodes[0];

                if (myNode.children && myNode.children.length > 0) {
                    layer.open({
                        anim: 'up',
                        content: "要删除的节点是父节点，如果删除将连同子节点一起删掉。\n\n请确认！",
                        btn: ['确认', '取消'],
                        yes: function (index) {
                            layer.close(index);
                            $.ajax({
                                url: "${ctx}/product-category!delete.action",
                                type: "post",
                                async: false,  //同步
                                data: {
                                    id: myNode.id
                                },
                                dataType: "json",
                                success: function (result) {
                                    layer.msg(result.msg);
                                    zTree.removeNode(myNode);

                                }
                            });
                        }
                    });

                } else {

                    $.ajax({
                        url: "${ctx}/product-category!delete.action",
                        type: "post",
                        async: false,  //同步
                        data: {
                            id: myNode.id
                        },
                        dataType: "json",
                        success: function (result) {
                            layer.msg(result.msg);
                            zTree.removeNode(myNode);
                        }
                    });
                }
            }
        }

        var zTree, rMenu;

        var log, className = "dark";
        function beforeDrag(treeId, treeNodes) {
            return false;
        }
        function beforeEditName(treeId, treeNode) {
            className = (className === "dark" ? "" : "dark");
            var zTree = $.fn.zTree.getZTreeObj("treeDemo");
            zTree.selectNode(treeNode);
            setTimeout(function () {
                layer.open({
                    anim: 'up',
                    content: "进入节点 -- " + treeNode.name + " 的编辑状态吗？",
                    btn: ['确认', '取消'],
                    yes: function (index) {
                        layer.close(index);
                        setTimeout(function () {
                            zTree.editName(treeNode);
                        }, 0);
                    }
                });
            }, 0);
            return false;
        }
        function beforeRemove(treeId, treeNode) {
            className = (className === "dark" ? "" : "dark");
            var zTree = $.fn.zTree.getZTreeObj("treeDemo");
            zTree.selectNode(treeNode);
            return confirm("确认删除 节点 -- " + treeNode.name + " 吗？");
        }
        function onRemove(e, treeId, treeNode) {
        }
        function beforeRename(treeId, treeNode, newName, isCancel) {
            className = (className === "dark" ? "" : "dark");
            if (newName.length == 0) {
                setTimeout(function () {
                    var zTree = $.fn.zTree.getZTreeObj("treeDemo");
                    zTree.cancelEditName();
                    layer.msg("节点名称不能为空.");

                }, 0);
                return false;
            }
            return true;
        }

        /**
         *  更新节点名
         * @param e
         * @param treeId
         * @param treeNode
         * @param isCancel
         */
        function onRename(e, treeId, treeNode, isCancel) {

            $.ajax({
                url: "${ctx}/product-category!update.action",
                type: "post",
                async: false,  //同步
                data: {
                    id: treeNode.id,
                    "productCategory.name": treeNode.name
                },
                dataType: "json",
                success: function (result) {
                    layer.msg(result.msg);
                }
            });
        }

        function selectAll() {
            var zTree = $.fn.zTree.getZTreeObj("treeDemo");
            zTree.setting.edit.editNameSelectAll = $("#selectAll").attr("checked");
        }

        $(document).ready(function () {
            $.fn.zTree.init($("#treeDemo"), setting, zNodes);
            $("#selectAll").bind("click", selectAll);
            zTree = $.fn.zTree.getZTreeObj("treeDemo");
            rMenu = $("#rMenu");
        });
    </SCRIPT>
    <style type="text/css">
        div#rMenu {
            position: absolute;
            visibility: hidden;
            top: 0;
            background-color: #555;
            text-align: left;
            padding: 2px;
        }

        div#rMenu ul li {
            margin: 1px 0;
            padding: 0 5px;
            cursor: pointer;
            list-style: none outside none;
            background-color: #DFDFDF;
        }

        ul.ztree {
            margin-top: 10px;
            border: 1px solid #617775;
            background: #f0f6e4;
            width: 1120px;
            height: 660px;
            overflow-y: scroll;
            overflow-x: auto;
        }


    </style>
</head>

<body>
<%--<div id="wrapper">--%>
    <%--<c:set var="left">productCategory</c:set>--%>
    <%--<%@ include file="/include/left/operation.jsp" %>--%>

    <%--<div id="page-wrapper" class="gray-bg">--%>
        <%--<div class="row wrapper border-bottom white-bg page-heading">--%>
            <%--<div class="col-lg-10">--%>
                <%--<h2>分类列表</h2>--%>
                <%--<ol class="breadcrumb">--%>
                    <%--<li>--%>
                        <%--<a href="${ctx}/productCategory/">分类管理</a>--%>
                    <%--</li>--%>
                    <%--<li class="active">--%>
                        <%--<strong>分类列表   提示: 点右键进行操作</strong>--%>
                    <%--</li>--%>
                <%--</ol>--%>
            <%--</div>--%>
        <%--</div>--%>

        <%--<div class="wrapper wrapper-content animated fadeInRight ecommerce">--%>
            <%--<div class="main">--%>
                <%--<div class="home_wrapper">--%>
                    <%--<div class="content_wrap">--%>
                        <%--<div class="zTreeDemoBackground left">--%>


                            <%--<ul id="treeDemo" class="ztree"></ul>--%>
                        <%--</div>--%>
                    <%--</div>--%>
                    <%--<div id="rMenu">--%>
                        <%--<ul>--%>
                            <%--<li id="m_add" onclick="addTreeNode();">增加节点</li>--%>
                            <%--<li id="m_del" onclick="removeTreeNode();">删除节点</li>--%>
                        <%--</ul>--%>
                    <%--</div>--%>

                <%--</div>--%>
            <%--</div>--%>

        <%--</div>--%>


    <%--</div>--%>

<%--</div>--%>

<div class="main">
    <div class="home_wrapper">
        <c:set var="left">productCategory</c:set>

        <%@ include file="/include/left/operation.jsp" %>
        <div class="content_wrap">
            <div class="zTreeDemoBackground left">

                <span class="helptip">提示: 点右键进行操作</span>
                <ul id="treeDemo" class="ztree"></ul>
            </div>
        </div>
        <div id="rMenu">
            <ul>
                <li id="m_add" onclick="addTreeNode();">增加节点</li>
                <li id="m_del" onclick="removeTreeNode();">删除节点</li>
            </ul>
        </div>

    </div>
</div>


</body>